<template>
  <div class="rewards">
    
    <div class="rewards-content">
      <div class="reward-section">
        <h2>我的奖励</h2>
        <div class="reward-card">
          <div class="reward-icon">🏆</div>
          <div class="reward-info">
            <h3>环保达人</h3>
            <p>完成10次碳足迹计算</p>
            <div class="progress-bar">
              <div class="progress" style="width: 70%"></div>
            </div>
            <span class="progress-text">7/10</span>
          </div>
        </div>
        
        <div class="reward-card">
          <div class="reward-icon">🌱</div>
          <div class="reward-info">
            <h3>绿色先锋</h3>
            <p>参与5次环保挑战</p>
            <div class="progress-bar">
              <div class="progress" style="width: 40%"></div>
            </div>
            <span class="progress-text">2/5</span>
          </div>
        </div>
      </div>
      
      <div class="reward-section">
        <div class="section-header">
          <h2>积分商城</h2>
          <router-link to="/shop" class="view-shop">前往商城 →</router-link>
        </div>
        <div class="rewards-grid">
          <div class="reward-item">
            <div class="reward-image">🌿</div>
            <h3>环保购物袋</h3>
            <p class="reward-cost">100 碳积分</p>
            <button class="redeem-btn">兑换</button>
          </div>
          
          <div class="reward-item">
            <div class="reward-image">♻️</div>
            <h3>可重复使用水瓶</h3>
            <p class="reward-cost">150 碳积分</p>
            <button class="redeem-btn">兑换</button>
          </div>
          
          <div class="reward-item">
            <div class="reward-image">🌳</div>
            <h3>植树一棵</h3>
            <p class="reward-cost">200 碳积分</p>
            <button class="redeem-btn">兑换</button>
          </div>
          
          <div class="reward-item">
            <div class="reward-image">🌞</div>
            <h3>太阳能充电器</h3>
            <p class="reward-cost">500 碳积分</p>
            <button class="redeem-btn">兑换</button>
          </div>
        </div>
      </div>
      
      <div class="reward-section">
        <h2>获取更多积分</h2>
        <div class="ways-grid">
          <div class="way-card">
            <div class="way-icon">🌍</div>
            <h3>记录碳足迹</h3>
            <p>每次记录可获得 20 积分</p>
          </div>
          
          <div class="way-card">
            <div class="way-icon">💬</div>
            <h3>发布动态</h3>
            <p>每次发布可获得 10 积分</p>
          </div>
          
          <div class="way-card">
            <div class="way-icon">🏆</div>
            <h3>完成挑战</h3>
            <p>根据难度获得 30-100 积分</p>
          </div>
          
          <div class="way-card">
            <div class="way-icon">♻️</div>
            <h3>参与交换</h3>
            <p>每次交换可获得 25 积分</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// 激励系统页面逻辑可以在这里添加
</script>

<style scoped>
.rewards {
  padding: 20px;
  width: 100%;
  box-sizing: border-box; /* 确保padding包含在宽度内 */
}

.page-header {
  text-align: center;
  margin-bottom: 40px;
  padding: 20px;
  box-sizing: border-box; /* 确保padding包含在宽度内 */
}

.page-header h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  color: #2c3e50;
}

.page-header p {
  font-size: 1.2rem;
  color: #7f8c8d;
}

.rewards-content {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 100%;
  box-sizing: border-box; /* 确保padding包含在宽度内 */
}

.reward-section h2 {
  color: #2c3e50;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #42b983;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section-header h2 {
  margin: 0;
  padding-bottom: 10px;
  border-bottom: 2px solid #42b983;
}

.view-shop {
  color: #42b983;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s;
}

.view-shop:hover {
  color: #359c6d;
  text-decoration: underline;
}

.reward-card {
  display: flex;
  background: white;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  padding: 25px;
  margin-bottom: 20px;
  align-items: center;
  width: 100%;
  box-sizing: border-box; /* 确保padding包含在宽度内 */
}

.reward-icon {
  font-size: 3rem;
  margin-right: 25px;
  min-width: 3rem; /* 确保图标不会被压缩 */
}

.reward-info h3 {
  margin: 0 0 10px 0;
  color: #2c3e50;
}

.reward-info p {
  margin: 0 0 15px 0;
  color: #7f8c8d;
}

.progress-bar {
  width: 100%;
  height: 12px;
  background-color: #e9ecef;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 5px;
  box-sizing: border-box; /* 确保padding包含在宽度内 */
}

.progress {
  height: 100%;
  background-color: #42b983;
  border-radius: 6px;
}

.progress-text {
  font-size: 0.9rem;
  color: #6c757d;
}

.rewards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 25px;
  width: 100%;
  box-sizing: border-box; /* 确保padding包含在宽度内 */
}

.reward-item {
  background: white;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  padding: 25px;
  text-align: center;
  transition: transform 0.3s;
  width: 100%;
  box-sizing: border-box; /* 确保padding包含在宽度内 */
}

.reward-item:hover {
  transform: translateY(-5px);
}

.reward-image {
  font-size: 3rem;
  margin-bottom: 15px;
}

.reward-item h3 {
  margin: 0 0 10px 0;
  color: #2c3e50;
}

.reward-cost {
  color: #42b983;
  font-weight: bold;
  margin: 0 0 20px 0;
}

.redeem-btn {
  padding: 12px 25px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 25px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s;
  white-space: nowrap; /* 防止文字换行 */
}

.redeem-btn:hover {
  background-color: #359c6d;
  transform: scale(1.05);
}

.ways-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 25px;
  width: 100%;
  box-sizing: border-box;
}

.way-card {
  background: white;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  padding: 25px;
  text-align: center;
  transition: transform 0.3s;
  width: 100%;
  box-sizing: border-box;
}

.way-card:hover {
  transform: translateY(-5px);
}

.way-icon {
  font-size: 3rem;
  margin-bottom: 15px;
  color: #42b983;
}

.way-card h3 {
  margin: 0 0 10px 0;
  color: #2c3e50;
}

.way-card p {
  margin: 0;
  color: #6c757d;
}

@media (max-width: 768px) {
  .reward-card {
    flex-direction: column;
    text-align: center;
  }
  
  .reward-icon {
    margin-right: 0;
    margin-bottom: 15px;
  }
  
  .page-header h1 {
    font-size: 2rem;
  }
  
  .rewards-grid,
  .ways-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .redeem-btn {
    width: 100%;
    max-width: 200px;
    margin: 0 auto;
  }
  
  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

@media (max-width: 480px) {
  .rewards {
    padding: 15px;
  }
  
  .reward-card {
    padding: 20px;
  }
  
  .reward-item,
  .way-card {
    padding: 20px;
  }
  
  .page-header h1 {
    font-size: 1.8rem;
  }
  
  .page-header p {
    font-size: 1rem;
  }
  
  .redeem-btn {
    padding: 10px 20px;
  }
}
</style>